<template>
	<div class="content">
		<div class="list_box">
			<div class="list">
				<p class="title"><span>*</span>公司类型：</p>
				<div class="label">
					<p @click="companyTypeClick(item,index)" v-for="(item,index) in companyTypeList" :key="index" :class="item.state?'on':''">{{item.label}}</p>
				</div>
			</div>

			<div class="list flex_l">
				<p class="title"><span>*</span>公司名称：</p>
				<input v-model="param.name" type="text" placeholder="若需隐藏字号，请自行用*代替">
			</div>

			<div class="list flex_l">
				<p class="title"><span>*</span>概述：</p>
				<input v-model="param.describes" type="text" placeholder="用一句话描述该公司，限50字以内">
			</div>

			<div class="list flex_l">
				<p class="title"><span>*</span>注册资本：</p>
				<u-radio-group 
					v-model="param.capital"
					placement="row">
					<u-radio activeColor="#23AC39" label="未实缴" name="1"></u-radio>
					<u-radio activeColor="#23AC39" label="已实缴" name="0"></u-radio>
				</u-radio-group>
			</div>
			<div class="list flex_l" v-if="param.capital == '0'">
				<input v-model="param.capitalAmount" type="text" placeholder="请输入注册资本">
				<p>万</p>
			</div>
			
			<div class="list flex_l">
				<p class="title"><span>*</span>成立时间：</p>
				<div class="change" @click="dateShow = true">
					<p>{{param.setTime?param.setTime:'请选择'}}</p>
					<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
				</div>
			</div>
			

			<div class="list flex_l">
				<p class="title"><span>*</span>注册地：</p>
				<div class="change" @click="cityShow = true">
					<p>{{cityName}}</p>
					<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
				</div>
			</div>
			

			<div class="list flex_l">
				<p class="title"><span>*</span>税务状态：</p>
				<u-radio-group 
					v-model="param.taxationState"
					placement="row">
					<u-radio activeColor="#23AC39" label="未开业" name="0"></u-radio>
					<u-radio activeColor="#23AC39" label="小规模" name="1"></u-radio>
					<u-radio activeColor="#23AC39" label="一般纳税人" name="2"></u-radio>
				</u-radio-group>
			</div>
			
			<block v-if="param.taxationState == '1' || param.taxationState == '2'">
				<div class="list flex_l">
					<p class="title"><span>*</span>纳税信用：</p>
					<div class="change" @click="oneClick('ns')">
						<p>{{getLabel(nsColumns[0],param.taxCredit)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
				<div class="list flex_l">
					<p class="title"><span>*</span>数电额度：</p>
					<div class="change" @click="oneClick('sd')">
						<p>{{getLabel(sdColumns[0],param.taxQuota)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
				<div class="list flex_l">
					<p class="title"><span>*</span>开票情况：</p>
					<div class="change" @click="oneClick('kp')">
						<p>{{getLabel(kpColumns[0],param.taxInvoicing)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
				<div class="list flex_l">
					<p class="title"><span>*</span>纳税情况：</p>
					<div class="change" @click="oneClick('nsqk')">
						<p>{{getLabel(nsqkColumns[0],param.taxSituation)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
			</block>


			<div class="list flex_l">
				<p class="title"><span>*</span>银行账户：</p>
				<u-radio-group 
					v-model="param.bankAccount"
					placement="row">
					<u-radio activeColor="#23AC39" label="未开户" name="0"></u-radio>
					<u-radio activeColor="#23AC39" label="已开户" name="1"></u-radio>
				</u-radio-group>
			</div>
			<block v-if="param.bankAccount == '1'">
				<div class="list flex_l">
					<p class="title"><span>*</span>开户行：</p>
					<div class="change" @click="oneClick('khh')">
						<p>{{getLabel(khhColumns[0],param.bankName)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
				<div class="list flex_l">
					<p class="title" style="width: 200rpx;"><span>*</span>日转账额度：</p>
					<div class="change" @click="oneClick('rzz')">
						<p>{{getLabel(rzzColumns[0],param.bankTransfer)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
				<div class="list flex_l">
					<p class="title"><span>*</span>流水情况：</p>
					<div class="change" @click="oneClick('ls')">
						<p>{{getLabel(lsColumns[0],param.bankTatement)}}</p>
						<u-icon name="arrow-right" color="#A6A6A6" size="18"></u-icon>
					</div>
				</div>
			</block>



			<div class="ss_box" :style="{height:autoHeight}">
				<div class="list flex_l">
					<p class="title">经营范围：</p>
					<u--textarea v-model="param.businessScope" placeholder="请输入内容"></u--textarea>
				</div>

				<div class="list flex_l">
					<p class="title">股东背景：</p>
					<u-radio-group 
						v-model="param.shareholder"
						placement="row">
						<u-radio activeColor="#23AC39" label="自然人" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="国央企" name="1"></u-radio>
						<u-radio activeColor="#23AC39" label="外资" name="2"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l">
					<p class="title" style="width:350rpx">资质许可（含高企、认证）：</p>
					<u-radio-group 
						v-model="param.qualification"
						placement="row">
						<u-radio activeColor="#23AC39" label="无" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有" name="1"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l" v-if="param.qualification == 1">
					<p class="title" style="width:200rpx"><span>*</span>已选择资质：</p>
					<div class="label_box">
						<p class="label" v-for="(item,index) in zzArr" :key="index">{{item.title}} <span @click="closeArr(0,index)"><u-icon name="close" color="#fff" size="14"></u-icon></span></p>
						<p class="text1" @click="addZz">增加资质 >></p>
					</div>
				</div>

				<div class="list flex_l">
					<p class="title">是否有商标：</p>
					<u-radio-group 
						v-model="param.trademark"
						placement="row">
						<u-radio activeColor="#23AC39" label="无" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有" name="1"></u-radio>
					</u-radio-group>
				</div>
				<div class="list flex_l" v-if="param.trademark == 1">
					<p class="title" style="width:200rpx"><span>*</span>已选择商标：</p>
					<div class="label_box">
						<p class="label" v-for="(item,index) in sbArr" :key="index">{{item.title}} <span @click="closeArr(1,index)"><u-icon name="close" color="#fff" size="14"></u-icon></span></p>
						<p class="text1" @click="addSb">增加商标 >></p>
					</div>
				</div>

				<div class="list flex_l">
					<p class="title">是否有专利：</p>
					<u-radio-group 
						v-model="param.patent"
						placement="row">
						<u-radio activeColor="#23AC39" label="无" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有" name="1"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l">
					<p class="title">是否有软著：</p>
					<u-radio-group 
						v-model="param.softWorks"
						placement="row">
						<u-radio activeColor="#23AC39" label="无" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有" name="1"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l">
					<p class="title">车牌指标：</p>
					<u-radio-group 
						v-model="param.licensePlate"
						placement="row">
						<u-radio activeColor="#23AC39" label="无" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有" name="1"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l">
					<p class="title">招头标业绩：</p>
					<u-radio-group 
						v-model="param.bidPerformance"
						placement="row">
						<u-radio activeColor="#23AC39" label="无" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有" name="1"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l">
					<p class="title" style="width:200rpx">社保缴纳记录：</p>
					<u-radio-group 
						v-model="param.socialSecurity"
						placement="row">
						<u-radio activeColor="#23AC39" label="无缴纳记录" name="0"></u-radio>
						<u-radio activeColor="#23AC39" label="有缴纳记录" name="1"></u-radio>
					</u-radio-group>
				</div>

				<div class="list flex_l">
					<p class="title">补充描述：</p>
					<input v-model="param.remark" type="text" placeholder="请输入补充描述">
				</div>
			</div>
			<p class="fei" @click="zk">非必填项<img :style="{transform:'rotate('+rotateNum+')'}" src="/static/f_bt.png" alt=""></p>
		
			<div class="list flex_l">
				<p class="title">出售价格：</p>
				<input v-model="param.price" type="text" placeholder="请输入公司售价，不填写默认面议">
			</div>
			<div class="list flex_l">
				<p class="title">联系电话：</p>
				<input v-model="param.phone" type="text" placeholder="请输入（电话/微信号二选一）">
			</div>
			<div class="list flex_l">
				<p class="title">微信号：</p>
				<input v-model="param.wechatNumber" type="text" placeholder="请输入（电话/微信号二选一）">
			</div>
		</div>

		<div class="anniu_box">
            <u-button 
                @click="sendSubmit"
                :disabled="isDisable || !notUsedCount"
                loadingMode="circle"
                :loading="isDisable"
                loadingText="发送中..."
                type="primary" 
                text="发布"
            >
            </u-button>
            <div class="tips">
                <p class="text">本账号当前还可以发布 <span>{{notUsedCount}}</span> 条信息</p>
                <p class="an" @click="toTaocan">去增加/转赠</p>
            </div>
        </div>

		<!-- 税务/银行账户弹窗选择 -->
		<u-picker 
			:show="oneShow" 
			:columns="oneColumns" 
			@confirm="oneConfirm" 
			@cancel="oneClose"
			keyName="label"
		></u-picker>

		<!-- 时间弹窗选择 -->
		<u-datetime-picker
			:show="dateShow"
			@cancel="cancelTime"
			@confirm="confirmTime"
			minDate="20"
			mode="year-month"
		></u-datetime-picker>

		<!-- 注册地弹窗 -->
		<u-picker 
			keyName="shortname" 
			@cancel=closePop 
			@close="closePop" 
			closeOnClickOverlay 
			title="选择所在地"  
			:show="cityShow" 
			ref="uPicker" 
			:columns="columns" 
			@change="changeHandler"
			@confirm="confirm"
		></u-picker>
	</div>
</template>

<script>
	import { mapState,mapActions } from 'vuex'
	import api from '@/api';
	import { formatDateYearMonth } from '@/utils/utils.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				isDisable:false,
				dateShow:false,
				cityShow:false,
				columns: [],
                columnData: [],
				autoHeight:'',
				rotateNum:'',
				oneShow:false,
				labelName:'',
				oneColumns:[],
				nsColumns:[// 纳税信用
					[
						{label: '不确定',value:'0'},
						{label: 'A级',value:'1'},
						{label: 'B级',value:'2'},
						{label: 'M级',value:'3'},
						{label: 'C级',value:'4'},
						{label: 'D级',value:'5'},
					]
				],
				sdColumns:[// 数电额度
					[
						{label: '不确定',value:'0'},
						{label: '100万以下',value:'1'},
						{label: '100万-500万',value:'2'},
						{label: '500万-1000万',value:'3'},
						{label: '1000万以上',value:'4'},
					]
				],
				kpColumns:[// 开票情况
					[
						{label: '不确定',value:'0'},
						{label: '未开票',value:'1'},
						{label: '开票量少',value:'2'},
						{label: '连续开票',value:'3'},
						{label: '开票量多',value:'4'},
					]
				],
				nsqkColumns:[// 纳税情况
					[
						{label: '不确定',value:'0'},
						{label: '未纳税',value:'1'},
						{label: '纳税额少',value:'2'},
						{label: '连续纳税',value:'3'},
						{label: '纳税额多',value:'4'},
					]
				],
				khhColumns:[// 开户行
					[
						{label: '不确定',value:'0'},
						{label: '地方性银行（含信用社）',value:'1'},
						{label: '非地方性银行（含信用社）',value:'2'},
					]
				],
				rzzColumns:[// 日转账额度
					[
						{label: '不确定',value:'0'},
						{label: '100万-500万',value:'1'},
						{label: '500及以上',value:'2'},
					]
				],
				lsColumns:[// 流水情况
					[
						{label: '不确定',value:'0'},
						{label: '流水很多',value:'1'},
						{label: '流水偏少',value:'2'},
						{label: '连续流水',value:'3'},
						{label: '无流水',value:'4'},
					]
				],
				companyTypeList:[
					{label:'普通公司',value:'0',state:false},
					{label:'国家局公司',value:'1',state:false},
					{label:'上市公司',value:'2',state:false}
				],
				param:{
					type:'0',
					companyType:'',
					name:'',
					userId:'',
					describes:'',
					capital:'',
					capitalAmount:'',
					setTime:'',
					domicile:'',
					taxationState:'',
					taxCredit:'',
					taxQuota:'',
					taxInvoicing:'',
					taxSituation:'',
					bankAccount:'',
					bankName:'',
					bankTransfer:'',
					bankTatement:'',
					businessScope:'',
					shareholder:'',
					qualification:'',
					trademark:'',
					patent:'',
					softWorks:'',
					licensePlate:'',
					bidPerformance:'',
					socialSecurity:'',
					price:'',
					phone:'',
					wechatNumber:'',
				},
				zzArr:[],
				sbArr:[],
				cityName:'请选择',
				notUsedCount:0
			}
		},
		computed: {
			...mapState({
				userId: state => state.user.userId,
				token: state => state.user.token,
				labelArr:state => state.user.labelArr,
				labelArr1:state => state.user.labelArr1
			})
		},
		methods: {

			...mapActions( ['updateUserZz','updateUserSb']),

			addZz(){
				uni.navigateTo({
					url: '/pages/company/aptitude/index'
				});
			},

			addSb(){
				uni.navigateTo({
					url: '/pages/company/trademark/index'
				});
			},

			// 获取可发送条数
            getFbNum(){
                api.user.package_get({userId:this.userId}).then(res=>{
					if(res.code == 200){
						if(!res.data){
							this.notUsedCount = 0
						}else{
							this.notUsedCount = res.data.notUsedCount
						}
					}
                })
            },

			// 跳转套餐
            toTaocan(){
                uni.navigateTo({
                    url: '/pages/taocan/index'
                });
            },

			// 获取地区
			getAreaTree(){
				api.user.getAreaTree().then(res=>{
					this.columns = [res.data.level1]
					this.columnData = res.data.level2
					this.columns.push(res.data.level2[0])
					console.log(this.columns)
				})
			},
			closePop(){
				this.cityShow = false
			},
			confirm(e){
				this.param.domicile = e.value[1].id
				this.cityName = e.value[1].shortname
				this.closePop()
			},

			changeHandler(e) {
                const {
                    columnIndex,
                    value,
                    values, // values为当前变化列的数组内容
                    index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
                    picker = this.$refs.uPicker
                } = e
                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
                if (columnIndex === 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
            },

			// 删除选中的资质/商标
			closeArr(num,index){
				if(!num){// 资质
					this.zzArr.splice(index, 1);
					return
				}
				this.sbArr.splice(index, 1);
			},

			// 提交表单
			sendSubmit(){
				if(!this.param.companyType){
					this.$toast('请选择公司类型！')
					return
				}
				if(!this.param.name){
					this.$toast('请输入公司名称！')
					return
				}
				if(!this.param.describes){
					this.$toast('请输入概述！')
					return
				}
				if(!this.param.capital){
					this.$toast('请选择注册资本！')
					return
				}
				if(this.param.capital == 0 && !this.param.capitalAmount){
					this.$toast('请输入注册资本！')
					return
				}
				if(!this.param.setTime){
					this.$toast('请选择成立时间！')
					return
				}
				if(!this.param.domicile){
					this.$toast('请选择注册地！')
					return
				}
				if(!this.param.taxationState){
					this.$toast('请选择税务状态！')
					return
				}
				if((this.param.taxationState == 1 || this.param.taxationState == 2) && (this.param.taxCredit == '请选择' || this.param.taxCredit == '')){
					this.$toast('请选择纳税信用！')
					return
				}
				if((this.param.taxationState == 1 || this.param.taxationState == 2) && (this.param.taxQuota == '请选择' || this.param.taxQuota == '')){
					this.$toast('请选择数电额度！')
					return
				}
				if((this.param.taxationState == 1 || this.param.taxationState == 2) && (this.param.taxInvoicing == '请选择' || this.param.taxInvoicing == '')){
					this.$toast('请选择开票情况！')
					return
				}
				if((this.param.taxationState == 1 || this.param.taxationState == 2) && (this.param.taxSituation == '请选择' || this.param.taxSituation == '')){
					this.$toast('请选择纳税情况！')
					return
				}
				if(!this.param.bankAccount){
					this.$toast('请选择银行账户！')
					return
				}
				if(this.param.bankAccount == 1 && (this.param.bankName == '请选择' || this.param.bankName == '')){
					this.$toast('请选择开户行！')
					return
				}
				if(this.param.bankAccount == 1 && (this.param.bankTransfer == '请选择' || this.param.bankTransfer == '')){
					this.$toast('请选择日转账额度！')
					return
				}
				if(this.param.bankAccount == 1 && (this.param.bankTatement == '请选择' || this.param.bankTatement == '')){
					this.$toast('请选择流水情况！')
					return
				}
				uni.showLoading({title: '提交中...'})
				this.param.userId = this.userId
				this.isDisable = true
				this.param.attributeList = this.zzArr.concat(this.sbArr)
				this.param.attributeList = this.param.attributeList.map(item=>{
					const {title,...rest} = item
					return rest
				})
				api.user.createCompany({...this.param}).then(res=>{
					if(res.code == 200){
						this.isDisable = false
						uni.showModal({
						title: '提示',
						content: '提交成功，等待工作人员审核',
						showCancel: true,
						cancelText: '返回',
						confirmText: '我的发布',
							success:(res)=>{
								if (res.confirm) {
									uni.redirectTo({
										url: '/pages/company/myFabu/index'
									});
								} else{
									wx.navigateBack({
										delta: 1
									});
								}
							},
						});
					}else{
						uni.hideLoading();
						this.$toast(res.msg)
						this.isDisable = false
					}
				})
			},


			// 选择纳税/开户
			oneConfirm(e){
				console.log(e)
				if(this.labelName == 'ns'){
					this.param.taxCredit = e.value[0].value
				}
				if(this.labelName == 'sd'){
					this.param.taxQuota = e.value[0].value
				}
				if(this.labelName == 'kp'){
					this.param.taxInvoicing = e.value[0].value
				}
				if(this.labelName == 'nsqk'){
					this.param.taxSituation = e.value[0].value
				}
				if(this.labelName == 'khh'){
					this.param.bankName = e.value[0].value
				}
				if(this.labelName == 'rzz'){
					this.param.bankTransfer = e.value[0].value
				}
				if(this.labelName == 'ls'){
					this.param.bankTatement = e.value[0].value
				}
				this.oneClose()
			},

			// 关闭
			oneClose(){
				this.oneShow = false
			},

			getLabel(list,value) {
				return list.find(item => item.value === value)?.label || '请选择';
			},

			// 纳税/开户弹窗
			oneClick(label){
				this.oneShow = true
				this.labelName = label
				let name = `${label}Columns`;
				this.oneColumns = this[name]
			},

			// 选择时间
			confirmTime(e){
				console.log(e)
				this.param.setTime = formatDateYearMonth(e.value)
				this.cancelTime()
			},

			// 取消时间
			cancelTime(){
				this.dateShow = false
			},

			// 公司类型点击
			companyTypeClick(item,index){
				this.param.companyType = item.value
				this.companyTypeList.forEach(item=>{
					item.state = false
				})
				this.companyTypeList[index].state = !item.state;
			},

			// 关闭选择城市
			close(){
				this.cityShow = false
				this.oneShow = false
			},

			zk(){
				if(this.autoHeight == 'auto'){
					this.autoHeight = '0'
					this.rotateNum = '0deg'
				}else{
					this.autoHeight = 'auto'
					this.rotateNum = '180deg'
				}
			},

			// 自定义格式化规则
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分`;
				}
				return value;
			},

		},
		onLoad(options) {
			console.log(options)
			this.updateUserZz('')
			this.updateUserSb('')
			this.getFbNum()
			this.getAreaTree()
		},
		onShow(){
			if(this.labelArr){
				this.zzArr = JSON.parse(this.labelArr)
				console.log(this.zzArr)
			}
			if(this.labelArr1){
				this.sbArr = JSON.parse(this.labelArr1)
				console.log(this.sbArr)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.list_box{
			margin:0 30rpx;
			.list{
				padding:30rpx 0;
				border-bottom: 1px solid #E4E4E4;
				&.flex_l{
					display: flex;
					align-items: center;
					input{
						flex: 1;
						font-size: 28rpx;
					}
					.title{
						width: 180rpx;
					}
					/deep/ .u-radio{
						margin-right:30rpx;
						text{
							font-size:28rpx !important;
						}
					}
					.change{
						flex: 1;
						font-size: 28rpx;
						display: flex;
						justify-content: space-between;
					}
					.label_box{
						flex: 1;
						text-align: center;
						.label{
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding:4rpx 16rpx;
							background: #23AC39;
							color:#fff;
							font-size:26rpx;
							border-radius: 6rpx;
							margin-bottom:6rpx;
							span{
								margin-left:10rpx;
							}
						}
					}
					.text1{
						text-align: center;
						color:#23AC39;
						font-size:28rpx;
					}
				}
				.title{
					font-size: 28rpx;
					color: #3D3D3D;
					font-weight: 500;
					span{
						font-size: 32rpx;
						color:#FF4441;
						margin-right:6rpx;
					}
				}
				.label{
					display: flex;
					margin-top:20rpx;
					p{
						padding:0 10rpx;
						height: 48rpx;
						line-height: 48rpx;
						border-radius: 4rpx;
						background: #F7F7F7;
						color:#D8D8D8;
						font-size: 28rpx;
						margin-right:30rpx;
						&.on{
							background: #23AC39;
							color:#fff;
						}
					}
				}
			}
		}
		.ss_box{
			height: 0;
			transition: all .3s;
			overflow: hidden;
		}
		.fei{
			height: 64rpx;
			border-bottom:1px solid #E4E4E4;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #23AC39;
			img{
				width: 48rpx;
				height: 38rpx;
			}
		}
		.anniu_box{
            margin:40rpx 28rpx 0 28rpx;
            text-align: center;
			padding-bottom:40rpx;
            /deep/ .u-button{
                height: 96rpx;
                line-height: 96rpx;
                border-radius: 100rpx;
                background: #23AC39;
                font-size: 32rpx;
                text-align: center;
                font-weight: 500;
                color:#fff;
                border:none;
            }
            .tips{
				display: flex;
				justify-content: center;
				align-items: center;
                margin:26rpx 0;
                .text{
                    font-size: 28rpx;
                    color: #333333;
					font-weight: 500;
                    span{
                        color:#FF4441;
                    }
                }
                .an{
                    width: 210rpx;
                    height: 62rpx;
                    line-height: 62rpx;
                    border-radius: 100rpx;
                    background: #23AC39;
                    color: #FFFFFF;
                    font-size:28rpx;
                    text-align: center;
                    margin-left:12rpx;
                }
            }
        }
	}
</style>
